<template>
	<view class="content">
		<view class="top_div">
			<view class="panel_div flex_start flex_items" v-if="userInfo">
				<div class="user_img flex_center pos_r" @click="editorFun">
					<image class="img" :src="$IMG_HOST + userInfo.avatar" mode="aspectFill"></image>
					<img class="pos_a editor_icon" src="@/static/image/editor_icon.png" alt="">
				</div>
				<view class="user_name flex1">
					{{ userInfo.username }}
				</view>
			</view>
			<view class="panel_div flex_start flex_items" v-else @click="onLogin">
				<div class="user_img flex_center pos_r">
					<img class="img" src="@/static/image/logo.png" alt="">
				</div>
				<view class="user_name flex1">
					点击登录账号
				</view>
			</view>
		</view>
		<view class="button_flex flex_center" v-if="userInfo">
			<u-button class="log_out" @click="logOut" text="退出登录" color="#F56C6C"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: null,
		}
	},
	onShow() {
		this.userInfo = this.$Storage.getUserInfo();
		// console.log(this.$IMG_HOST + this.userInfo.avatar)
		this.getUser();
	},
	methods: {
		// 选择头像
		editorFun() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: (res) => {
					console.log(res);

					this.$HttpUploads(res.tempFilePaths, res => {
						console.log(res)
						const { data } = res;
						this.$Ajax({
							url: "user/editor",
							data: {
								_id: this.userInfo._id,
								avatar: data,
							},
							method: 'post'
						}).then(e => {
							this.$u.toast('修改头像成功');
							this.getUser();
						})
					}, err => {
						console.log(err)
					})
				}
			})
		},
		getUser() {
			this.$Ajax({
				url: "user/getUserInfo",
				data: {
					userId: this.userInfo._id,
				},
				method: 'get'
			}).then(res => {
				const { code, data } = res;
				this.$Storage.setUserInfo(data);
				this.userInfo = data;
			})
		},
		onLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		},
		logOut() {
			uni.showModal({
				title: '提示',
				content: '确认是否退出登录',
				success: (res) => {
					if (res.confirm) {
						this.$Storage.removeUserInfo();
						this.$Storage.removeToken();
						uni.showToast({
							duration: 2000,
							success: () => {
								setTimeout(() => {
									this.onLogin();
								}, 2000)
							}
						});
					}
				}
			});
		}
	}
}
</script>

<style lang="scss">
.content {
	width: 100vw;

	.top_div {
		background: linear-gradient(180deg, #5394F2 90%, rgba(255, 255, 255, 0) 100%);
		padding-bottom: 60rpx;

		.panel_div {
			padding: 80rpx 40rpx 26rpx 40rpx;
			width: 100%;
			box-sizing: border-box;

			.user_img {
				width: 160rpx;
				height: 160rpx;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					overflow: hidden;
				}

				.editor_icon {
					width: 40rpx;
					right: 10rpx;
					bottom: 10rpx;
				}
			}

			.user_name {
				font-size: 50rpx;
				font-weight: bold;
				color: #fff;
				padding-left: 40rpx;
			}
		}
	}
}

.button_flex {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 200rpx;

	.log_out {
		width: 360rpx;
		height: 80rpx;
		border-radius: 12rpx;
	}
}
</style>